{% load static %}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>河南省华帝建设工程有限公司</title>
  <link rel="icon" href="{% static 'img/favicon.ico' %}" type="image/x-icon">
</head>

<body>
  <div id="app">
    {% include 'navbar.html' %}
    <div class="top-contont">
      <div class="txt">
        <div class="ytable h100pc auto-inner">
          <div class="ytable-cell">
            <h2 class="wow fadeInRight animated" style="visibility: visible; animation-name: fadeInRight;">工程动态</h2>
            <p class="wow fadeInRight animated" data-wow-delay="0.3s"
              style="visibility: visible; animation-delay: 0.3s; animation-name: fadeInRight;">以质量求生存，以诚信谋发展</p>
          </div>
        </div>
      </div>
      <img src="{% static 'img/aboutda.jpg' %}" class="img-block pc" alt="关于我们">
      <img src="{% static 'img/aboutxiao.jpg' %}" class="img-block wap" alt="关于我们">
    </div>
    
  <!-- <nav class="nav-menu">
    <section class="auto-inner">
      <ul class="ul clearfix">
        <li id="nav5" :class="{'aon': type === 'performance'}" data-target="content5">
          <a href="javascript:void(0);" class="dot" @click="changeType('performance')">中标业绩</a>
        </li>
        <li id="nav4" :class="{'aon': type === 'project_update'}" data-target="content4">
          <a href="javascript:void(0);" class="dot" @click="changeType('project_update')">中标项目</a>
        </li>
      </ul>
    </section>
  </nav> -->
    <section class="auto-inner">
      <div class="news-list mb80">
        <a v-for="item in news" :key="item.id" class="url wow fadeInUp animated"
        :href='"/dynamic/details?news_id="+item.id'  style="visibility: visible; animation-name: fadeInUp;">
          <dl>
            <dt>
              <figure class="Ispic" :style="{ backgroundImage: 'url(' + item.cover_image_url + ')' }">
                <img :src="item.cover_image_url" :alt="item.title">
              </figure>
            </dt>
            <dd>
              <div class="inner">
                <aside v-text="item.title" class="tit dot1"></aside>
                <time v-text="item.publish_date"></time>
                <p v-html="item.content" class="dot3"></p>
              </div>
            </dd>
          </dl>
        </a>
      </div>

      <div class="Pagination ">
        <span class="p_cur">目前在第<b v-text="page"></b>页, </span>
        <span class="p_count">共有<b v-text="totalPages"></b>页, </span>
        <span class="p_total">共有<b v-text="totalItems"></b>条记录</span>
        <span class="p_page">
          <a href="javascript:void(0);" class="a_first" @click="getNews(1)">第一页</a>
          <a href="javascript:void(0);" class="a_prev" @click="prevPage">上一页</a>
          <em class="num">
            <a v-for="n in paginationNumbers" :key="n" href="javascript:void(0);"
               :class="{'a_cur': n === page, 'a_num': n !== page}" @click="getNews(n)" v-text="n"></a>
          </em>
          <a href="javascript:void(0);" class="a_next" @click="nextPage">下一页</a>
          <a href="javascript:void(0);" class="a_end" @click="getNews(totalPages)">最后一页</a>
        </span>
        <span class="p_jump">
          <b class="f1">跳转到</b>
          <input type="text" class="i_text" v-model.number="jumpPage">
          <b class="f2">页</b>
          <input type="button" class="i_button" @click="getNews(jumpPage)" value="Go">
        </span>
      </div>
    </section>
  </div>
  {% include 'footerbar.html' %}
  <!-- <script src="{% static 'vendor/popper/popper.min.js' %}"></script> -->
  <script src="{% static 'vendor/vue/vue-2.6.12.js' %}"></script>
  <script src="{% static 'vendor/axios/axios.min.js' %}"></script>

  <script>
    new Vue({
      el: '#app',
      data: {
        page: 1,
        totalPages: 1,
        totalItems: 0,
        news: [],
        jumpPage: 1,
        type: 'project_update' // 默认加载业绩信息
      },
      methods: {
        getNews(page = 1) {
          axios.get('/api/news/list/', { params: { page, type: this.type } })
            .then(response => {
              this.news = response.data.results;
              this.page = response.data.current_page;
              this.totalPages = response.data.total_pages;
              this.totalItems = response.data.count;
            })
            .catch(error => {
              console.error('Error fetching news:', error);
            });
        },
        nextPage() {
          if (this.page < this.totalPages) {
            this.getNews(this.page + 1);
          }
        },
        prevPage() {
          if (this.page > 1) {
            this.getNews(this.page - 1);
          }
        },
        changeType(type) {
          this.type = type; // 切换类型
          this.getNews(1); // 重新加载第一页数据
        }
      },
      computed: {
        paginationNumbers() {
          const range = [];
          for (let i = 1; i <= this.totalPages; i++) {
            if (
              i === 1 ||
              i === this.totalPages ||
              (i >= this.page - 2 && i <= this.page + 2)
            ) {
              range.push(i);
            }
          }
          return range;
        }
      },
      mounted() {
        this.getNews();
      }
    });
  </script>
</body>

</html>